<template>
  <el-carousel 
    :interval="4000"
    height="240px" 
  >
    <el-carousel-item 
      v-for="imgSrc in banner" 
      :key="imgSrc"
    >
      <a href="#">
        <div 
          :style="{backgroundImage: `url(${imgSrc})`}"
          class="slider-img-div"
        />
      </a>
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
  // props: {
  //   banner: {
  //     type: Array,
  //     default() {
  //       return []
  //     }
  //   }
  // }
  data() {
    return {
      banner: [
        'http://p0.meituan.net/codeman/daa73310c9e57454dc97f0146640fd9f69772.jpg',
        'http://p1.meituan.net/codeman/826a5ed09dab49af658c34624d75491861404.jpg',
        'http://p0.meituan.net/codeman/a97baf515235f4c5a2b1323a741e577185048.jpg',
        'http://p0.meituan.net/codeman/33ff80dc00f832d697f3e20fc030799560495.jpg',
        'http://p1.meituan.net/codeman/e419ae8488f776407459b0ee7eada070286451.jpg'
      ]
    }
  }
}
</script>

<style lang="stylus" scoped>
  .el-carousel__item
    a
      display block
      width 100%
      height 100%
      .slider-img-div
        display inline-block
        width 100%
        height 100%
        background-repeat no-repeat
        background-position 50%
        background-size cover
</style>
